<!-- 添加员工页 -->
<template>
  <view v-if="shenheStatus == 0" class="page-add">
    <view class="add-form" v-show="!isSelectMember">
      <view class="form-item">
        <view class="label">{{ $t('mdAdmin.staffName') }}</view>
        <view class="content">
          <input
            type="text"
            v-model="form.name"
            :placeholder="$t('mdAdmin.noStaff')"
          />
        </view>
      </view>
      <view class="form-item">
        <view class="label">{{ $t('clerk.phone') }}</view>
        <view class="content">
          <input
            type="number"
            v-model="form.mobile"
            :placeholder="$t('mdAdmin.phone')"
            maxlength="11"
          />
        </view>
      </view>
      <view class="form-item">
        <view class="label">{{ $t('mdAdmin.vip') }}</view>
        <view
          class="content flex-content"
          @click="isSelectMember = !isSelectMember"
        >
          <input
            type="text"
            disabled
            v-model="memberName"
            :placeholder="$t('mdAdmin.chooseVip')"
          />
          <u-icon size="24" color="#888888" name="arrow-right"></u-icon>
        </view>
      </view>
    </view>
    <view class="foot-btn" v-if="!isSelectMember">
      <view class="btn-box" @click="submitForm">{{ $t('list.confirm') }}</view>
    </view>

    <view class="member-section" v-if="isSelectMember">
      <view class="member-list">
        <view
          class="member-item"
          v-for="(item, index) in memberList"
          :key="index"
          @click="selectItem(item)"
        >
          <image class="item-img" :src="item.avatar" mode="" />
          <view class="item-info">
            <view class="name">{{ item.name }}</view>
            <view class="mobile"></view>
          </view>
        </view>
      </view>
    </view>
  </view>
  <Shenhe v-else-if="shenheStatus == 1"></Shenhe>
</template>

<script>
import Shenhe from '@/components/shenhe/shenhe';
export default {
  components: { Shenhe },
  data() {
    return {
      form: {
        name: '',
        mobile: '',
        saas_user_id: '',
      },
      isSelectMember: false,
      memberList: [],
      page: 1,
      pageSize: 20,
      row_count: 0,
      memberName: '',
    };
  },
  onLoad(t) {
    this.getMemberList();
  },
  onReachBottom() {
    if (!this.isSelectMember) return;
    if (this.page * this.pageSize >= this.row_count) return;
    this.page++;
    this.getMemberList('loadmore');
  },
  computed: {},
  onShow() {},
  watch: {},
  methods: {
    submitForm() {
      if (!this.form.name) {
        uni.showToast({
          title: this.$t('mdAdmin.noStaff'),
          icon: 'none',
        });
        return;
      }
      if (!this.form.mobile) {
        uni.showToast({
          title: this.$t('mdAdmin.phone'),
          icon: 'none',
        });
        return;
      } else {
        if (!this.$utils.isMobile(this.form.mobile)) {
          uni.showToast({
            title: this.$t('mdAdmin.errPhone'),
            icon: 'none',
          });
          return;
        }
      }
      if (!this.form.saas_user_id) {
        uni.showToast({
          title: this.$t('mdAdmin.noVip'),
          icon: 'none',
        });
        return;
      }
      this.$allrequest.mdAdmin.addStaff(this.form).then(res => {
        if (!res.code) {
          uni.showToast({
            title: this.$t('mdAdmin.addSuc'),
            icon: 'none',
          });
          setTimeout(() => {
            uni.navigateBack();
          }, 1500);
        } else {
          uni.showToast({
            title: res.msg,
            icon: 'none',
          });
        }
      });
    },
    getMemberList(type) {
      this.$allrequest.mdAdmin
        .staffMemberList({ page: this.page })
        .then(res => {
          if (!res.code) {
            if (type == 'loadmore') {
              this.memberList = [...this.memberList, ...res.data.list];
            } else {
              this.memberList = res.data.list;
            }
            this.row_count = res.data.row_count;
          }
        });
    },
    selectItem(item) {
      this.form.saas_user_id = item.id;
      this.memberName = item.name;
      this.isSelectMember = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.page-add {
  width: 100%;
  min-height: 100vh;
  background: #f2f2f2;
  position: relative;
  .add-form {
    width: 100%;
    padding-left: 30rpx;
    background-color: #ffffff;
    .form-item {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid #f8f8f8;
      padding: 14px 0;
      .label {
        font-size: 30rpx;
        font-family: PingFang SC;
        font-weight: 400;
        color: rgba(29, 29, 29, 0.94);
        width: 160rpx;
      }
      .content {
        flex: 1;
        padding-right: 30rpx;
      }
      .flex-content {
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
    }
  }
  .foot-btn {
    width: 100%;
    padding: 20rpx 0;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 111;
    padding-bottom: calc(env(safe-area-inset-bottom));
    .btn-box {
      width: 90.4vw;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 88rpx;
      background: #f0250e;
      border-radius: 44rpx;
      font-size: 32rpx;
      font-family: PingFang SC;
      font-weight: 500;
      color: #ffffff;
      margin-bottom: 20rpx;
    }
  }

  .member-section {
    width: 100%;
    .member-list {
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding-top: 24rpx;

      .member-item {
        width: 100%;
        background: #ffffff;
        padding: 30rpx;
        display: flex;
        align-items: center;
        margin-bottom: 24rpx;
        .item-img {
          width: 92rpx;
          height: 92rpx;
          background: #f2f2f2;
          border-radius: 50%;
        }
        .item-info {
          flex: 1;
          margin-left: 24rpx;
          .name {
            font-size: 28rpx;
            font-family: PingFang SC;
            font-weight: 600;
            color: rgba(0, 0, 0, 0.94);
          }
          .mobile {
            font-size: 24rpx;
            font-family: PingFang SC;
            font-weight: 400;
            color: rgba(140, 140, 140, 0.94);
          }
        }
      }
    }
  }
}
</style>
